<template>
	<view class="scanCode">
		<view
			class="status_bar_h"
			:style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#20BF6C',
			}"></view>
		<view class="img_box">
			<swiper
				style="height: 400rpx"
				circular
				:indicator-dots="false"
				:autoplay="true"
				:interval="2000"
				:duration="500">
				<swiper-item
					v-for="(item, key) in src"
					:key="key">
					<view class="">
						<image
							style="width: 100%; height: 400rpx"
							mode="aspectFill"
							:src="item"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="main">
			<view class="title">ONE桌游自助繳費系统</view>
			<view class="sd_title">投幣金額</view>
			<view class="form"> ${{ cardnumber }} </view>
			<!-- <p>{{ this.info.deve }}</p>
			<p>{{ this.info.address }}</p>
			<p>{{ list }}</p> -->
			<view>{{ detail }}</view>
			<!-- <custom-pay src="/hybrid/html/pay.html"></custom-pay> -->
			<!-- <view class="web_view">
				<web-view
					:webview-styles="{
						progress: {
							color: '#FF3333',
							top: ' 0px',
							left: '0px',
							zIndex: '9',
							backgroundColor: '#fff',
						},
					}"
					src="/hybrid/html/pay.html"></web-view>
			</view> -->
			<!-- <view class="btn_wrap">
				<view
					class="btn_box"
					@click="jump('phoneLogin')"
					>手机号登录</view
				>
			</view> -->
			<view
				@click="toMac"
				style="padding: 50rpx; background-color: greenyellow"
				>投幣頁面</view
			>
			<view
				@click="toShop"
				style="padding: 50rpx; background-color: greenyellow"
				>購買頁面</view
			>
			<view
				@click="toIndex"
				style="padding: 50rpx; background-color: greenyellow"
				>首頁</view
			>
			<view
				@click="toDetail"
				style="padding: 50rpx; background-color: greenyellow"
				>訂單詳細</view
			>
			<view style="padding-bottom: 100px"></view>
		</view>
	</view>
</template>

<script>
import useStore from '@/store/index.js';
import baseURL from '@/utils/baseURL.js';
import { zbCode } from '@/config/code';
import zIndex from 'uview-plus/libs/config/zIndex';
import { countMoney } from '../../utils/countMoney';
import IO from '@/utils/files';
// import CustomPay from '@/components/CustomPay/CustomPay.vue';
export default {
	// components: { CustomPay },
	data() {
		return {
			src: '/static/images/1.jpg',
			cardnumber: '0',
			scanCodeImg: '', // 二维码
			baseURL,
			isChecked: false,
			disabled: false,
			changeText: '獲取驗證碼',
			form: {},
			statusBarHeight: 0, // 顶部状态栏高度
			bthHeight: 0, // 底部按钮高度
			list: null,
			scrollTop: 0,
			old: {
				scrollTop: 0,
			},
			detail: {},
			info: {
				deve: null,
				address: null,
			},
		};
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		// const screenTop = uni.getSystemInfoSync().safeArea.top;
		// const screenBot = uni.getSystemInfoSync().safeArea.bottom;
		this.bthHeight = uni.getSystemInfoSync().screenHeight - (1000 - 40) / 2;

		this.setSwiperImg();
		console.log('原生====前');
		IO.read('long.json', 'name')
			.then(res => {
				// res 读取的文件内容
				console.log(res);
				IO.storage('long.json', [
					res,
					{
						name: 'test',
					},
				]);
			})
			.catch(err => {
				// 找不到该文件就写入一个空白文件。
				IO.storage('long.json', []);
				console.log(err, 'err');
			});
		console.log('原生====后');
	},
	methods: {
		toMac() {
			uni.navigateTo({
				url: '/pages/pay/slotMachines/slotMachines',
			});
		},
		toShop() {
			uni.navigateTo({
				url: '/pages/shop/shop',
			});
		},
		toIndex() {
			uni.navigateTo({
				url: '/pages/index/index',
			});
		},
		toDetail() {
			uni.navigateTo({
				url: '/pages/predetermineDetails/predetermineDetails',
			});
		},
		setSwiperImg() {
			const equipmentOptions = JSON.parse(
				uni.getStorageSync('equipmentOptions')
			);
			// console.log('equipmentOptions', equipmentOptions.imagejh);
			const _src = equipmentOptions.imagejh
				? equipmentOptions.imagejh.split(',')
				: [];
			if (_src.length > 1) {
				this.src = _src.map(item => baseURL + item);
			} else if (_src.length === 1) {
				this.src = [baseURL + _src[0]];
			}
		},

		submit() {
			if (this.isChecked) {
				if (this.checkForm()) {
					const params = {
						user_name: this.form.user_name,
						user_pass: this.form.user_pass,
					};
					login(params)
						.then(res => {
							uni.showToast({
								title: '成功',
								duration: 1000,
							});
						})
						.catch(err => {
							uni.showModal({
								title: '系統提示',
								content: `登入失敗，原因${err}`,
							});
						});
				} else {
					uni.showModal({
						title: '系統提示',
						content: '請檢查是否填寫',
					});
				}
			} else {
				uni.showToast({
					title: '請勾選協議',
					duration: 1000,
				});
			}
		},
		phoneChange(e) {},
		getCode() {
			// 获取二维码
			uni.getSystemInfo({
				success: res => {
					this.detail = res;
					uni.request({
						url: baseURL + '/api/index/qrcode',
						data: {
							equipmentID: res.deviceId,
						},
						header: {
							Accept: 'application/json',
							'Content-Type': 'application/json',
							'X-Requested-With': 'XMLHttpRequest',
						},
						method: 'POST',
						responseType: 'arraybuffer',
						success: res => {
							const resOptions = res.data.data;
							// console.log('res', res.data);
							// const blob = new Blob(res.data, { type: 'png' });
							// const imageUrl = (window.URL || window.webkitURL).createObjectURL(
							// 	blob
							// );
							this.scanCodeImg =
								'data:image/png;base64,' +
								window.btoa(
									new Uint8Array(res.data).reduce(
										(data, byte) => data + String.fromCharCode(byte),
										''
									)
								);
							// console.log('this.scanCodeImg', this.scanCodeImg);
						},
						fail: error => {},
					});
				},
			});
		},
		checkForm() {
			const { user_name, user_pass } = this.form;
			return user_name && user_pass ? true : false;
		},
		jump(data) {
			let url = '';
			switch (data) {
				case 'phoneLogin':
					url = '/pages/menu/menu';
					break;
				default:
			}
			uni.reLaunch({
				url,
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.scanCode {
	height: 100%;

	.main {
		padding: 40rpx 40rpx 0;
		text-align: center;
		color: $uni-color-green;

		.title {
			font-size: 36rpx;
		}

		.sd_title {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 50rpx;
		}

		.form {
			position: relative;
			height: 148rpx;
			padding-bottom: 120rpx;
			display: flex;
			justify-content: center;
			align-content: center;

			.checkout_btn {
				position: absolute;
				right: 20rpx;
				bottom: 60rpx;
				font-size: 24rpx;
			}
		}

		.btn_wrap {
			display: flex;
			justify-content: space-around;

			.btn_box {
				// width: 140rpx;
				padding: 10rpx;
				text-align: center;
				border-radius: 10rpx;
				color: #fff;
				background-color: $uni-color-green;
			}
		}

		.deal {
			padding: 80rpx 20rpx 20rpx;
			font-size: 24rpx;

			::v-deep .uni-checkbox-input {
				border-color: $uni-color-green;
				border-radius: 50%;
				vertical-align: middle;
			}

			.text {
				vertical-align: middle;
			}
		}
	}
}
</style>
